  <div class="intro">
      <p>The Transition Utility provides an API for creating advanced transitions between style property values. Native CSS Transitions are used when possible.</p>
</div>

{{>getting-started}}

				<h2 id="using">Using Transitions</h2>
				<h3 id="attributes">Transition Method</h3>
                    <p>The Transition Utility adds the <code>transition</code> method to <code>Node</code> instances when the <code>transition</code> module is included.  The method accepts a configuration object, and an optional callback function.  The config may include one or more <code>CSS</code> properties to be transitioned, an optional <code>duration</code> (in seconds), <code>delay</code>, and  <code>easing</code> for fine-tuning transition behavior. Calling the <code>transition</code> method begins the transition.  The <code>callback</code> is run after the transition has completed.</p>

```
Y.one('#demo').transition({
    easing: 'ease-out',
    duration: 0.75, // seconds
    width: '10px',
    height: '10px'
}, function() {
    this.remove();
});
```

				<h3 id="easings">Supported Easings</h3>

                <p>Transition supports the following easings:</p>
                <table>
                <thead>
                    <tr>
                        <th>Easing</th>
                        <th>Description</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><code>cubic-bezier</code></td>
                        <td>Specifies a cubic-bezier curve. The four values specify points P1 and P2 of the curve as (x1, y1, x2, y2). All values must be in the range [0, 1] or the definition is invalid.</td>
                    </tr>
                    <tr>
                        <td><code>ease (default)</code></td>
                        <td>equivalent to cubic-bezier(0.25, 0.1, 0.25, 1)</td>
                    </tr>
                    <tr>
                        <td><code>linear</code></td>
                        <td>equivalent to cubic-bezier(0, 0, 1, 1)</td>
                    </tr>
                    <tr>
                        <td><code>ease-in</code></td>
                        <td>equivalent to cubic-bezier(0.42, 0, 1, 1)</td>
                    </tr>
                    <tr>
                        <td><code>ease-out</code></td>
                        <td>equivalent to cubic-bezier(0, 0, 0.58, 1)</td>
                    </tr>
                    <tr>
                        <td><code>ease-in-out</code></td>
                        <td>equivalent to cubic-bezier(0.42, 0, 0.58, 1)</td>
                    </tr>
                </tbody>
                </table>
                <p>Transition easings are defined as part of the CSS3 Transition Module.  See the <a href="http://www.w3.org/TR/css3-transitions/#transition-timing-function_tag">full specification</a> for further details.

				<h3 id="attr-specific">Property Specific Attributes</h3>

                    <p>The Transition Utility also allows for property specific attributes.  Each attribute may optionally have its own <code>duration</code>, </code>easing</code>, and/or <code>delay</code>.  This provides much finer control over the transition timeline, enabling more complex effects.</p>

```
Y.one('#demo').transition({
    duration: 0.75,
    easing: 'ease-out',

    height: 0,

    width: {
        delay: 0.75,
        easing: 'ease-in',
        value: 0
    },

    opacity: {
        delay: 1.5,
        duration: 1.25,
        value: 0
    }
});
```


        <h3 id="transition-events">Listening for Events</h3>
            <p>The Transition Utility provides optional notifications for reacting to the start and end of a transition.  These can be subscribed to via the <code>on</code> attribute of the transition config.</p>

```
var node = Y.one('#demo');

Y.one('#demo').transition({
    duration: 1,
    height:0,

    width: {
        delay: 1,
        duration: 0.5,
        value: 0
    },

    on: {
        start: function() {
            Y.log('start');
        },

        end: function() {
            Y.log('end');
        }
    }
});
```

        <p>For simplicity, an end handler can also be added as a function callback:

```
Y.one('#demo').transition({
    duration: 1,
    height:0,

    width: {
        delay: 1,
        duration: 0.5,
        value: 0
    }
}, function() {
    Y.log('end');
});

```
